import cn from "classnames";
import _ from "lodash";
import { defineComponent } from "vue";
import styles from "./NationList.module.scss";
import { useYsStore } from "./store";

type NationListProps = {
  activeNationKey: string;
};

type NationListEmit = {
  onActiveNationChange?: (key: string) => void;
};

const E_ACTIVE_NATION_CHANGE = "active-nation-change";

const NationList = defineComponent<NationListProps & NationListEmit>({
  props: ["activeNationKey"],
  emits: [E_ACTIVE_NATION_CHANGE],
  setup(props, { emit }) {
    const ysStore = useYsStore();

    const handleNationSelected = (key: string) => () => emit(E_ACTIVE_NATION_CHANGE, key);

    return () => (
      <ul class={styles["nation-list"]}>
        {ysStore.nations.map((it) => {
          const active = props.activeNationKey === it.key;
          return (
            // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> TODO: 解释一下用意
            <li
              key={it.key}
              class={cn(styles["nation-list-item"], active && styles["nation-list-item-active"])}
              onClick={handleNationSelected(it.key)}
            >
              {it.name}
            </li>
          );
        })}
        <li class={cn(styles["nation-list-item"])}>敬请期待</li>
      </ul>
    );
  },
});

export default NationList;
